<template>
	<view>
		<view>
			<!-- 头像信息 -->
			<view class="user-info">
				<view>
					<image @tap="toLogin" mode="aspectFill" class="head-img" v-if="info" :src="cdn(info.skill.image)"></image>
					<image @tap="toLogin" mode="aspectFill" class="head-img" v-else :src="cdn(config.skill_image)"></image>
				</view>
				<view class="z-margin-l-32" v-if="info">
					<view class="name">
						{{ info.skill.name }}
						<text class="jz-type">{{ info.skill.skillCateName }}</text>
					</view>
					<view class="job-text">工号：{{ info.skill.code }}</view>
				</view>
				<view class="z-margin-l-32" v-else>
					<view class="name" @tap="toLogin">请先登录</view>
				</view>
			</view>

			<!-- 保证金信息 -->
			<view class="message z-margin-t-32 z-padding-lr-24 z-flex-c-s-b z-padding-tb-24">
				<view class="message-each z-flex-c-s-b z-padding-l-24 z-padding-r-32 backcolor-1" @tap="toEarnestMoney">
					<view>
						<view class="earnest-money">{{ skill.ensure_price || 0 }}</view>
						<view class="earnest-text z-margin-t-16">诚信保证金（元）</view>
					</view>
					<view>
						<image class="mes-img" src="../../static/index/my/my-1.png"></image>
					</view>
				</view>
				<!-- 二 -->
				<view class="message-each z-flex-c-s-b z-padding-l-24 z-padding-r-32 backcolor-2" @tap="toserve">
					<view>
						<view class="earnest-money">{{ info.goodsCount || 0 }}</view>
						<view class="earnest-text z-margin-t-16">服务项目</view>
					</view>
					<view>
						<image class="mes-img" src="../../static/index/my/my-2.png"></image>
					</view>
				</view>
				<!-- 三 -->
				<view class="message-each z-flex-c-s-b z-padding-l-24 z-padding-r-32 backcolor-3" @tap="toBalance(0)">
					<view>
						<view class="earnest-money">{{ userInfo.money || 0 }}</view>
						<view class="earnest-text z-margin-t-16">平台余额（元）</view>
					</view>
					<view>
						<image class="mes-img" src="../../static/index/my/my-3.png"></image>
					</view>
				</view>
				<!-- 四 -->
				<view class="message-each z-flex-c-s-b z-padding-l-24 z-padding-r-32 backcolor-4" @tap="toBalance(1)">
					<view>
						<view class="earnest-money">{{ userInfo.shop_money || 0 }}</view>
						<view class="earnest-text z-margin-t-16">商家余额（元）</view>
					</view>
					<view>
						<image class="mes-img" src="../../static/index/my/my-4.png"></image>
					</view>
				</view>
			</view>

			<!-- 更多功能 -->
			<view class="more-box z-margin-t-24">
				<view class="more-title z-font-32">更多功能</view>

				<view class="more-each-box z-flex-c">
					<view class="more-each z-margin-t-48" v-for="(item,index) in moreList" @tap="toServel(item.url)">
						<image class="more-img" :src="item.img"></image>
						<view class="z-font-24 z-text-c more-text">{{ item.title }}</view>
						<button type="primary" open-type="contact" class="contact" v-if="!item.url"></button>
					</view>
				</view>
			</view>

			<!-- 设置 -->
			<view @tap="toSet" class="z-flex-c-s-b set z-margin-t-24 z-padding-lr-32">
				<view class="">
					<image class="set-img" src="../../static/index/my/set.png"></image>
					设置
				</view>
				<image class="l-img" src="../../static/index/to-img.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			moreList: [
				{ img: '../../static/index/my/my-5.png', title: '加入商家', url: '/service/merchant/merchant' },
				{ img: '../../static/index/my/my-7.png', title: '提现绑定', url: '/service/account/account' },
				{ img: '../../static/index/my/my-8.png', title: '平台公告', url: '/service/notice/notice' },
				{ img: '../../static/index/my/my-9.png', title: '我的评价', url: '/service/comments/comments' },
				{ img: '../../static/index/my/my-10.png', title: '培训中心', url: '/service/exercise/exercise' },
				{ img: '../../static/index/my/my-11.png', title: '联系客服' },
				{ img: '../../static/index/my/my-12.png', title: '意见反馈', url: '/service/feedback/feedback' }
			],
			info: '',
			config: uni.getStorageSync('config'),
			skill:'',
			userInfo:''
		};
	},
	onShow() {
		this.getInfo();
	},
	methods: {
		toserve() {
			this.util.authSkip('/service/serveList/serveList');
		},
		// 跳转信用
		tocredit() {
			this.util.authSkip('/service/credit/credit');
		},
		// 跳转余额
		toBalance(e) {
			this.util.authSkip('/service/balance/balance?type=' + e);
		},
		// 跳转保证金
		toEarnestMoney() {
			this.util.authSkip('/service/earnestMoney/earnestMoney');
		},
		toSet() {
			this.util.authSkip('/service/set/set');
		},
		toLogin() {
			this.util.skip('/service/login/login');
		},
		toServel(e) {
			console.log(e)
			this.util.authSkip(e);
		},
		getInfo() {
			if (!uni.getStorageSync('token')) return;
			this.http.get('skill/skillindex', '', !this.info).then((res) => {
				this.moreList[3].url = '/service/comments/comments?type=skill&id=' + res.data.skill.id;
				this.info = res.data,
				this.moreList = this.moreList
				this.skill = this.info.skill
				this.userInfo = this.info.userInfo
			});
		}
	}
};
</script>

<style>
/* pages/my/my.wxss */
page {
	background-color: #edf1f4;
}
.user-info {
	display: flex;
	align-items: center;
	margin: 12rpx 0 0 32rpx;
}
.head-img {
	width: 118rpx;
	height: 118rpx;
	border-radius: 50%;
}
.name {
	font-size: 40rpx;
	font-weight: 800;
	color: #1c274c;
}
.jz-type {
	font-size: 22rpx;
	font-weight: 500;
	background-color: #deeaf9;
	color: #1677ff;
	display: inline-block;
	padding: 6rpx 12rpx;
	position: relative;
	top: -6rpx;
}
.job-text {
	font-size: 22rpx;
	font-weight: 500;
	color: #a4a9b7;
	margin-top: 10rpx;
}
.message {
	width: 640rpx;
	height: 332rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
	flex-wrap: wrap;
}
.message-each {
	width: 251rpx;
	height: 154rpx;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
}
.mes-img {
	width: 76rpx;
	height: 76rpx;
}
.earnest-money {
	font-size: 36rpx;
	font-weight: bold;
	color: #c45049;
}
.earnest-text {
	font-size: 22rpx;
	font-weight: 500;
	color: #1c274c;
}
.backcolor-1 {
	background-color: #fcf3f4;
}
.backcolor-2 {
	background-color: #f5f6fd;
}
.backcolor-3 {
	background-color: #f9f3fa;
}
.backcolor-4 {
	background-color: #fcf9f3;
}

/* 更多功能 */
.more-box {
	width: 686rpx;
	height: 390rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
}
.more-title {
	padding: 32rpx 0 0 32rpx;
}
.more-each-box {
	flex-wrap: wrap;
}
.more-each {
	width: 170rpx;
	position: relative;
}
.contact {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
.more-img {
	width: 48rpx;
	height: 48rpx;
	display: block;
	margin: auto;
}
.more-text {
	margin-top: 12rpx;
}
.set {
	width: 622rpx;
	height: 120rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
}
.set-img {
	width: 40rpx;
	height: 40rpx;
	position: relative;
	top: 8rpx;
}
.l-img {
	width: 32rpx;
	height: 32rpx;
}
</style>
